<template>
  <div class="payment">
    <!-- 头部 -->
    <NavBar title="支付" />

    <!-- 收货地址 -->
    <div class="shou">
      <van-cell is-link @click="show = true">
        <div class="shoutitle" slot="title">
          <span class="shoucontent">收货人: </span>
          <span class="consignee">{{ phonelist[pash].name }}</span>
          <span class="shoucontent">手机号: </span>
          <span class="phone ">{{ phonelist[pash].mobile }}</span>
          <p class="addr">收货地址： {{ phonelist[pash].address }}</p>
        </div>
      </van-cell>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="onSelect"
      />
    </div>
    <!-- 购买的商品 -->
    <div class="shop">
        <van-cell v-for="item in shoplist" :key="item.id">
          <van-card
            v-for="items in item.productList"
            :key="items.id"
            :num="item.quantity"
            :price="(items.price / 100).toFixed(2)"
            :title="items.name"
            :thumb="API.BASE_SERVER_URL + items.defaultImg"
          />
        </van-cell>
    </div>
    <!-- 价格明细 -->
    <div class="price">
      <van-cell :border="false">
        <h4>价格明细</h4>
      </van-cell>
      <van-cell :border="false">
        <div slot="title">
          <span class="pricetitle">商品总价</span>
          <span class="pricezhong">共2件宝贝</span>
        </div>
        <div class="pricerigth">￥{{ (data.price / 100).toFixed(2) }}</div>
      </van-cell>
      <van-cell title="店铺优惠" :value="'-￥' + (data.paymentFlag / 100).toFixed(2) " :border="false" />
      <van-cell title="总计" :value="((data.price - data.paymentFlag) / 100).toFixed(2)" />
    </div>
    <!-- 支付订单 -->
    <div class="paymentShop">
      <van-button round block color="linear-gradient(to right, #ff6034, #ee0a24)" @click="pay">支付</van-button>
    </div>

  </div>
</template>
<script>
export default {
  data () {
    return {
      userId: localStorage.getItem('userId'),
      shoplist: [],
      phonelist: [{ name: '', mobile: '', address: '' }],
      show: false,
      actions: [],
      pash: 0, // 显示联系人的信息
      data: {},
      amount: 0 // 用户余额
    }
  },
  methods: {
    async loadData () {
      // 获取待支付订单数据
      const { data: res } = await this.$post(this.API.API_URL_CART_ORDER, {
        userId: this.userId,
        type: 1
      })
      if (res) {
        this.shoplist = res.orderItemList
        this.phonelist = res.contectList
        res.contectList.forEach((item, index) => {
          this.actions.push({ name: item.name + ' ' + item.mobile, subname: item.address, index: index })
        })
        this.data = res
      }
      // 获取用户余额
      await this.$post(this.API.API_URL_CUSTOMER_Account, {
        userId: this.userId
      }).then(data => {
        this.amount = data.data.amount
      })
    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.pash = item.index
      this.show = false
      this.$toast(item.name)
    },
    async pay () {
      if (this.amount >= this.data.price) {
        const { data: res } = await this.$post(this.API.API_URL_CUSTOMER_Pay_Order, {
          userId: this.userId,
          amount: -this.data.price
        })
        if (res) {
          const { data: payres } = await this.$post(this.API.API_URL_ORDER_PAYMENT, {
            orderNum: this.data.orderNum,
            userId: this.userId,
            id: this.data.contectList[this.pash].id,
            paymentType: 2
          })
          if (payres) {
            this.$toast.success('支付成功')
            this.$router.back()
          }
        }
      } else {
        this.$toast.fail('余额不足！')
      }
    }
  },
  created () {
    this.loadData()
  }
}
</script>
<style scoped>
.payment {
  text-align: left;
}
.shou .shoutitle /deep/ span {
  font-size: 16px;
  color: #78797c;
}
.shou .shoutitle .shoucontent {
  font-size: 14px;
}
.shou .shoutitle .consignee {
  margin-right: 15px;
}
.shou .shoutitle /deep/ p.addr {
  margin: 5px 0;
  color: #8d8f96;
}
.price h4 {
  margin: 5px 0;
}
.price .pricetitle {
  margin-right: 10px;
}
.price .pricezhong {
  font-size: 12px;
  color: #969799;
}
.paymentShop {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
